<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI助手文件上传测试</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            padding: 30px;
            margin-bottom: 30px;
        }
        h1 {
            color: #2c3e50;
            margin-bottom: 30px;
            text-align: center;
        }
        h2 {
            color: #3498db;
            margin-top: 30px;
            margin-bottom: 20px;
            border-bottom: 2px solid #3498db;
            padding-bottom: 10px;
        }
        .form-group {
            margin-bottom: 20px;
        }
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #555;
        }
        input[type="file"] {
            margin-bottom: 10px;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            width: 100%;
        }
        textarea {
            width: 100%;
            min-height: 120px;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-family: inherit;
            resize: vertical;
        }
        .param-group {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
            margin-bottom: 20px;
        }
        .param-item {
            flex: 1;
            min-width: 200px;
        }
        input[type="text"], input[type="number"] {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            margin-top: 5px;
        }
        button {
            background-color: #3498db;
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            font-weight: 600;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #2980b9;
        }
        button:disabled {
            background-color: #95a5a6;
            cursor: not-allowed;
        }
        .response-container {
            margin-top: 30px;
            padding: 20px;
            background-color: #f8f9fa;
            border-radius: 6px;
            border: 1px solid #e9ecef;
        }
        .response-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        .response-title {
            font-weight: 600;
            color: #2c3e50;
        }
        .clear-btn {
            background-color: #e74c3c;
            padding: 6px 12px;
            font-size: 14px;
        }
        .clear-btn:hover {
            background-color: #c0392b;
        }
        .response-content {
            white-space: pre-wrap;
            word-break: break-word;
            max-height: 500px;
            overflow-y: auto;
            background-color: white;
            padding: 15px;
            border-radius: 4px;
            border: 1px solid #dee2e6;
        }
        .loading {
            display: none;
            text-align: center;
            padding: 20px;
            color: #3498db;
        }
        .file-info {
            font-size: 14px;
            color: #666;
            margin-top: 10px;
            padding: 10px;
            background-color: #f0f8ff;
            border-radius: 4px;
        }
        .supported-formats {
            font-size: 14px;
            color: #666;
            margin-top: 5px;
        }
        .error-message {
            color: #e74c3c;
            font-weight: 500;
            margin-top: 10px;
            padding: 10px;
            background-color: #ffeaea;
            border-radius: 4px;
            border-left: 4px solid #e74c3c;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>AI助手文件上传功能测试</h1>
        
        <h2>通用文件上传功能</h2>
        <p>支持多种文本格式文件上传（.txt, .md, .json, .csv, .html等），可自定义提示问题让AI助手分析文件内容。</p>
        
        <div class="form-group">
            <label for="fileUpload">选择文件上传：</label>
            <input type="file" id="fileUpload" accept=".txt,.md,.markdown,.json,.csv,.html,.htm,.xml,.js,.css">
            <div class="supported-formats">支持格式：txt, md, markdown, json, csv, html, htm, xml, js, css</div>
            <div id="fileInfo" class="file-info" style="display: none;"></div>
        </div>
        
        <div class="form-group">
            <label for="promptText">提示问题（选填）：</label>
            <textarea id="promptText" placeholder="请输入您想让AI助手分析文件的问题，例如：'请总结这个文件的主要内容'或'分析这个CSV数据并提供见解'"></textarea>
        </div>
        
        <div class="param-group">
            <div class="param-item">
                <label for="modelSelect">模型选择（选填）：</label>
                <input type="text" id="modelSelect" value="deepseek-reasoner" placeholder="deepseek-reasoner">
            </div>
            <div class="param-item">
                <label for="temperature">温度参数（选填）：</label>
                <input type="number" id="temperature" value="0.7" min="0" max="1" step="0.1">
            </div>
            <div class="param-item">
                <label for="maxTokens">最大令牌数（选填）：</label>
                <input type="number" id="maxTokens" value="1024" min="1" max="4096">
            </div>
        </div>
        
        <button id="uploadButton">上传文件并分析</button>
        
        <div id="loadingIndicator" class="loading">
            <p>正在上传文件并分析，请稍候...</p>
        </div>
        
        <div id="errorDisplay" style="display: none;"></div>
        
        <div id="responseContainer" class="response-container" style="display: none;">
            <div class="response-header">
                <div class="response-title">AI助手回复：</div>
                <button id="clearResponse" class="clear-btn">清除回复</button>
            </div>
            <div id="responseContent" class="response-content"></div>
        </div>
    </div>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const fileUpload = document.getElementById('fileUpload');
            const fileInfo = document.getElementById('fileInfo');
            const promptText = document.getElementById('promptText');
            const modelSelect = document.getElementById('modelSelect');
            const temperature = document.getElementById('temperature');
            const maxTokens = document.getElementById('maxTokens');
            const uploadButton = document.getElementById('uploadButton');
            const loadingIndicator = document.getElementById('loadingIndicator');
            const errorDisplay = document.getElementById('errorDisplay');
            const responseContainer = document.getElementById('responseContainer');
            const responseContent = document.getElementById('responseContent');
            const clearResponse = document.getElementById('clearResponse');
            
            // 显示文件信息
            fileUpload.addEventListener('change', function() {
                if (this.files && this.files[0]) {
                    const file = this.files[0];
                    const fileSizeMB = (file.size / (1024 * 1024)).toFixed(2);
                    fileInfo.innerHTML = `
                        <strong>文件名：</strong>${file.name}<br>
                        <strong>文件大小：</strong>${fileSizeMB} MB<br>
                        <strong>文件类型：</strong>${file.type || '未知'}
                    `;
                    fileInfo.style.display = 'block';
                } else {
                    fileInfo.style.display = 'none';
                }
            });
            
            // 上传文件并分析
            uploadButton.addEventListener('click', function() {
                const file = fileUpload.files[0];
                
                if (!file) {
                    showError('请选择要上传的文件');
                    return;
                }
                
                // 检查文件大小（最大5MB）
                if (file.size > 5 * 1024 * 1024) {
                    showError('文件大小不能超过5MB');
                    return;
                }
                
                // 准备表单数据
                const formData = new FormData();
                formData.append('file', file);
                
                // 创建请求对象
                const request = {
                    prompt: promptText.value.trim() || undefined,
                    model: modelSelect.value.trim() || undefined,
                    temperature: parseFloat(temperature.value) || undefined,
                    max_tokens: parseInt(maxTokens.value) || undefined
                };
                
                // 将请求对象添加到表单数据
                formData.append('prompt', request.prompt || '');
                formData.append('model', request.model || 'deepseek-reasoner');
                formData.append('temperature', request.temperature || 0.7);
                formData.append('max_tokens', request.max_tokens || 1024);
                
                // 显示加载状态
                uploadButton.disabled = true;
                loadingIndicator.style.display = 'block';
                errorDisplay.style.display = 'none';
                responseContainer.style.display = 'none';
                
                // 发送请求
                fetch('http://localhost:8000/api/deepseek/upload-file', {
                    method: 'POST',
                    body: formData
                })
                .then(response => {
                    uploadButton.disabled = false;
                    loadingIndicator.style.display = 'none';
                    
                    if (!response.ok) {
                        throw new Error(`服务器响应错误: ${response.status}`);
                    }
                    return response.json();
                })
                .then(data => {
                    if (data.error) {
                        showError(data.error);
                    } else {
                        responseContent.textContent = data.response;
                        responseContainer.style.display = 'block';
                    }
                })
                .catch(error => {
                    uploadButton.disabled = false;
                    loadingIndicator.style.display = 'none';
                    showError(`请求失败: ${error.message}`);
                });
            });
            
            // 清除回复
            clearResponse.addEventListener('click', function() {
                responseContainer.style.display = 'none';
                responseContent.textContent = '';
            });
            
            // 显示错误信息
            function showError(message) {
                errorDisplay.className = 'error-message';
                errorDisplay.textContent = message;
                errorDisplay.style.display = 'block';
            }
        });
    </script>
</body>
</html>